<template>
<div v-for="item,index in obj.LIST" :key="index" class="single">
    <img :src="item.isvaild==true?is:no" class="img" @click="item.isvaild=!item.isvaild">
    <span class="name">{{ item.name }}</span>
    <span class="grade">lv:{{ item.grade }}</span>
    <span class="attribute">{{ item.attribute }}</span>
    <span class="fight">{{item.fightnumber}}</span>
</div>
</template>

<script setup>
    let obj=defineProps(['LIST']);
    let is="/src/IMG/isselect.png";
    let no="/src/IMG/noselect.png";
</script>

<style scoped>
    .single{
        display: flex;
        align-items: center;
        .name{
            margin-left: 10px;
            width: 40%;
        }
        .grade{
            width: 15%;
        }
        .attribute{
            width: 15%;
        }
        .fight{
            width: 20%;
        }
    }
    .img{
        height: 20px;
        width: 20px;
        cursor: pointer;
        margin-left: 5px;
    }
</style>